<template>
	<view class="certmain">
		<uni-nav-bar shadow title="电子发票" @clickLeft="$wanlshop.back(1)" height="88rpx" :border="false" :fixed="true"
			backgroundColor="#FFFFFF" :shadow="false" left-icon="left"></uni-nav-bar>

		<view class="container">
			<uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
				<uni-forms-item name="type" required label="抬头类型">
					<radio-group v-model="formData.invoice_type" @change="radioChange">
						<label class="radio">
							<radio value="企业" checked="true" />企业
						</label>
						<label class="radio">
							<radio value="个人" />个人
						</label>
					</radio-group>
				</uni-forms-item>
				<uni-forms-item name="name" required label="发票抬头">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.name" placeholder="请输入公司全称">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="tax_no"  label="识别号码">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.tax_no" placeholder="请输入纳税人识别号/个人不用填写">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="remark" required label="发票内容">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.remark" placeholder="请输入发票内容">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="money" required label="发票金额">
					<uni-easyinput type="number"  :inputBorder="true" v-model="formData.money" placeholder="请输入金额">
					</uni-easyinput>
					<text style="color: #666;font-size: 22rpx;">电子发票将在预计3-5个工作日发出</text>
				</uni-forms-item>
				
					<uni-forms-item name="email" required label="电子邮箱">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.email" placeholder="请输入您的电子邮箱">
					</uni-easyinput>
				</uni-forms-item>
				<view>
					<button @click="submitForm('form')">提交</button>

					<!-- <button @click="resetForm">重置表单</button> -->
				</view>
			</uni-forms>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				imageStyles: {},
				idcard: '',
				AllList: [],
				dataTree: [{
						text: "亲子茶会",
						value: "1",
					},
					{
						text: "青年茶会",
						value: "2",
					},
					{
						text: "成人茶会",
						value: "3",
					},
					{
						text: "老人茶会",
						value: "4",
					}
				],
				formData: {
					name: '',
					invoice_type:'企业',
					tax_no:'',
					remark:'',
					money:0,
					email:'',
					type:'add'

				},
				image: "",
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名'
							},
							{
								minLength: 1,
								maxLength: 15,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'
							}
						]
					},
					remark:{
						rules: [{
								required: true,
								errorMessage: '请输入发票内容'
							}
						]
					},
					email:{
						rules: [{
								required: true,
								errorMessage: '请输入邮箱号'
							}
						]
					},

				}


			}
		},
		onReady() {

		},
		methods: {
			change(name, value) {
				this.formData.checked = value
				this.$refs.form.setValue(name, value)
			},
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			select(e) {
				console.log('选择文件：', e)
				let vm = this
				// vm.formData.image = e
				uni.uploadFile({
					url: 'https://yxcx.bigchun.com/api/common/upload',
					filePath: e.tempFilePaths[0],
					name: 'file', //后台接收字段名
					success: (res) => {
						console.log(JSON.parse(res.data))
						let result = JSON.parse(res.data)
						if (result.code == 1) {
							// vm.formData.image = e.tempFilePaths
							vm.image = result.data.url
						}
					},
					fail: (err) => {}
				})

			},
			radioChange(value){
					console.log(value)
					this.formData.invoice_type =value.detail.value
			},
			submitForm(form) {
			
				let vm = this
						
					if(vm.formData.invoice_type=='企业'){
							
						if(vm.formData.tax_no==''){
							uni.showToast({
								title:'需填写发票识别号码',
								icon:'error'
							})
							return false
						}
					}
				vm.$refs[form]
					.submit()
					.then(res => {
					
						vm.$api.post({
							url: '/wanlshop.Invoice/invoice',
							data: vm.formData,
							success: (res) => {
								console.log(res)

								uni.showToast({
									title: '提交成功！'
								})
								setTimeout(() => {
									vm.$wanlshop.back(1)
								}, 1500)
								// this.BannerList = res.banner
							}
						})

					})
					.catch(errors => {
						console.error('验证失败：', errors)
					})
			},

			//重置表单 。原生的组件input组件不能重置表单
			resetForm() {
				this.$refs.form.resetFields()
			},
			validateField(form) {
				this.$refs[form]
					.validateField(['name', 'email'])
					.then(res => {

						console.log('表单的值：', res)
					})
					.catch(errors => {
						console.error('验证失败：', errors)
					})
			},

			clearValidate(form, name) {
				if (!name) name = []
				this.$refs[form].clearValidate(name)
			}
		}
	}
</script>

<style lang="scss">
	.certmain {


		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: 40rpx;

	}

	.cu-custom {
		line-height: 90rpx;
	}

	.container {
		padding: 30rpx;
	}

	/deep/ .uniui-clear {
		display: none;
	}
	/deep/ .uni-forms-item__inner{
		padding-bottom: 30rpx;
	}
</style>
